<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="right">
				<view class="flex" style="margin-right: 25rpx" @tap="chatFunction()">
					<image style="width:50rpx; height: 50rpx; z-index: 999" src="/static/tabbar/factory/7370.png">
					</image>
				</view>
			</block>
		</hx-navbar>
		<y-chat :userId="userId" :messageList="messageList" :chatType="chatType" :updateList="updateList"
			:defaultOptions="defaultOptions" :quotationId="quotationId" :tagOptions="tagOptions" :sheetList="sheetList"
			@onRefresh="getNext" @playPhoto="playPhoto" @playCamera="playCamera" @send="send" @tapAvator="tapAvator"
			ref="task" @onSuccess='onSuccess'></y-chat>
	</view>
</template>

<script>
	import {
		webScroct,
		ws
	} from "@/common/webscroct.js"
	export default {
		data() {
			return {
				// 标题栏配置
				config: {
					title: "消息列表",
					back: true,
					rightSlot: true,
				},
				userId: 1,
				tagOptions: {
					1: {
						text: '管理员',
						bgColor: '#ff4100',
						color: '#fff'
					},
				},
				defaultOptions: {
					userId: 'userId',
					msgId: 'id',
					name: 'name',
					message: 'message',
					img: 'img',
					time: 'time',
					avator: 'avator',
					tagLabel: 'tagLabel'
				},
				messageList: [],
				updateList: [],
				sheetList: [],
				// Socket连接状态
				IsOpen: false,
				// SocketTask
				SocketTask: false,
				// 是否上线
				IsOnline: false,
				//错误重连次数
				errorSocket: 0,
				chatType: null,
				chatId: null,
				myName: '',
				myAvatar: '',
				pageNum: '',
				pages: '',
				pageSize: 10,
				Avatar: '',
				quotationId: null,
				sessionId: '',
			}
		},
		onLoad(options) {
			this.config.title = options.title
			this.chatType = options.type
			let zx = this.$cache.get('id')
			console.log(zx, options.id, '挖的挖')
			if (zx == options.id) {
				this.chatId = options.sendId
			} else {
				this.chatId = options.id
			}
			this.myName = options.myName
			this.myAvatar = options.myIcon
			this.Avatar = options.avatar
			console.log(this.Avatar, '下次下次做')
			// this.history()
			this.getNext()
		},
		onShow() {
			this.openSocket();
			// this.history()
		},
		onHide() {},
		onUnload() {
			uni.closeSocket();
		},
		methods: {
			chatFunction() {
				console.log(123123123)
				console.log(this.sessionId, '宣传宣传')
				this.$tools.goPageNoAuth('./ChatFunction?data=' + this.sessionId)
			},
			onSuccess(e) {
				console.log(e, '医院打我的')
			},
			history(data) {
				if (data == undefined) {
					data = {
						receiveId: this.chatId,
						receiveType: this.chatType
					}
				}
				this.$api.history(data).then((res) => {
					console.log(res, '小册子')
					this.pageNum = res.data.result.pageNo,
						this.pages = res.data.result.pages,
						res.data.result.list.forEach((item) => {
							item.message = item.content
							item.time = item.createTime
							let sendId = item.sendId
							let receiveId = item.receiveId
							item.id = sendId
							let myId = this.$cache.get('id')
							let type = this.$cache.get('type')
							console.log(myId, sendId, '几加啤酒')
							if (myId === sendId) {
								if (type == item.sendType) {
									item.name = this.myName
									item.avatar = this.myAvatar
								} else {
									item.name = this.config.title
									item.avatar = this.Avatar
								}
							} else {
								item.name = this.config.title
								item.avatar = this.Avatar
							}
						})
					if (res.data.result.pages == res.data.result.pageNo) {
						console.log('符文')
						this.messageList = res.data.result.list
						this.sessionId = res.data.result.list[0].sessionId
					} else {
						console.log('印大道')
						let a = res.data.result.list
						let b = this.messageList
						this.messageList = [...a, ...b]
					}


				})
			},
			openSocket() {
				let token = uni.getStorageSync("token")
				let url = ws + webScroct + '/gptSockety' + wuid + '/1'
				// 连接
				this.SocketTask = uni.connectSocket({
					url: url,
					fail(e) {
						console.log("连接失败")
					},
					success(e) {
						console.log(e, "连接成功")
					},
					complete: () => {}
				});
				console.log('socket', this.SocketTask)
				// 监听开启
				this.SocketTask.onOpen(() => {
					// 将连接状态设为已连接
					console.log('将连接状态设为已连接');
					this.errorSocket = 0
					this.IsOpen = true
					this.IsOnline = true
				})
				// 监听关闭
				this.SocketTask.onClose(() => {
					console.log('连接状态关闭');
					uni.closeSocket();
				})
				// 监听错误
				this.SocketTask.onError((e) => {
					console.log(e, '连接错误');
				})
				// 监听接收信息
				this.SocketTask.onMessage((e) => {
					let a = JSON.parse(e.data)
					console.log(a, '出自行车自行车')
					if (a.remark == '') {
						this.updateList = {
							// id: ++this.messageList[this.messageList.length - 1].id + 10, // id必须是唯一值
							name: a.userName,
							message: a.content,
							time: a.createTime,
							avatar: a.avatar,
							tagLabel: 61,
							type: a.type,
							fileUrl: a.fileUrl,
							audioTime: a.audioTime,
							id: a.sendId
						}
					}
					this.quotationId = Number(a.quotationId)
					console.log(this.quotationId, '没开门米')
					this.sessionId = a.sessionId
				})
			},
			tapAvator(e) {
				console.log(e, 'ee')
			},
			getNext(stop) {
				// console.log(this.pageNum,'我该施工员')
				let data = {
					pageNo: this.pageNum,
					pageSize: this.pageSize,
					receiveId: this.chatId,
					receiveType: this.chatType
				}
				if (this.pageNum == 1) return
				if (this.pageNum > 1) {
					data.pageNo--
				}
				// console.log(this.pages, this.pageNum, '等我打完我的')
				setTimeout(() => {
					this.history(data)
					stop()
				}, 100)

			},
			playPhoto(file) {
				console.log(file, 'file')
			},
			playCamera(file) {
				console.log(file, 'file')
			},
			async send(val, a) {
				console.log(val, a, '大大娃娃单空间')
				let fileUrl = ''
				let concat = a
				let audioTime = null
				if (val == 2) {
					fileUrl = a;
					concat = ''
					fileUrl = 'http://' + await this.$tools.uploadFile(fileUrl, val)
				}
				if (val == 3) {
					a.url = await this.$tools.uploadFile(a.url, val)
					fileUrl = 'http://' + a.url
					concat = ''
					audioTime = a.length

				}
				//两种方式
				//方式一: 把数据以对象形式赋值给updateList即可自动发送(推荐)
				console.log(a, '创造性彩瓦违法')
				this.updateList = {
					// id: ++this.messageList[this.messageList.length - 1].id + 10, // id必须是唯一值
					name: this.myName,
					message: concat,
					time: new Date().getTime(),
					avatar: this.myAvatar,
					tagLabel: 61,
					type: val,
					id: this.$cache.get('id'),
					fileUrl: fileUrl,
					audioTime: audioTime,
					checked: a.checked
				}
				let concaet = JSON.stringify(this.updateList)
				uni.sendSocketMessage({
					data: concaet,
					complete: (res) => {
						console.log('调用完毕', res)
					}
				});
				//方式二: 自己操作messageList => 可以通过push, 也可以messageList整个重新赋值
				// this.messageList.push({
				// 	userId: 1,
				// 	id: ++this.messageList[this.messageList.length - 1].id + 10, // id必须是唯一值
				// 	name: '白',
				// 	message: val,
				// 	time: new Date().getTime(),
				// 	avator: 'https://tva3.sinaimg.cn/large/9bd9b167gy1g4lhmt4zm5j21hc0xcnhs.jpg',
				// 	tagLabel: 1
				// })
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>